<script lang="tsx">
import { defineComponent } from 'vue';
import { ElDrawer, ElButton } from 'element-plus';

export default defineComponent({
  name: 'BaseDrawer',
  inheritAttrs: false,
  props: {
    modelValue: {
      type: Boolean,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    cancelText: {
      type: String,
      default: '取消',
    },
    confirmText: {
      type: String,
      default: '确定',
    },
    showFooter: {
      type: Boolean,
      default: true,
    },
    beforeClose: {
      type: Function,
      default: null,
    },
  },
  emits: ['update:modelValue', 'close', 'confirm', 'beforeClose'],
  setup(props, { emit, slots, attrs }) {
    const handleClose = () => {
      emit('update:modelValue', false);
      emit('close');
    };

    const handleBeforeClose = (done: () => void) => {
      // 如果父组件提供了 beforeClose 函数，则调用它
      if (props.beforeClose) {
        props.beforeClose(done);
      } else {
        // 如果没有提供 beforeClose 函数，则直接关闭
        done();
      }
    };

    const handleConfirm = () => {
      emit('confirm');
    };

    // 默认属性
    const defaultAttrs = {
      size: '900',
      'destroy-on-close': true,
      'close-on-click-modal': false,
      'close-on-press-escape': false,
    };

    return () => (
      <ElDrawer
        modelValue={props.modelValue}
        title={props.title}
        {...defaultAttrs}
        {...attrs}
        onUpdate:modelValue={(val: boolean) => emit('update:modelValue', val)}
        onClose={handleClose}
        beforeClose={handleBeforeClose}
        v-slots={{
          footer: slots.footer ? slots.footer : props.showFooter ? () => (
            <div class="flex justify-end gap-3">
              <ElButton onClick={handleClose}>{props.cancelText}</ElButton>
              <ElButton type="primary" onClick={handleConfirm}>
                {props.confirmText}
              </ElButton>
            </div>
          ) : undefined,
        }}
      >
        {slots.default?.()}
      </ElDrawer>
    );
  },
});
</script> 
